<template>
  <div id="addbox">
    <h1>新增管理</h1>
    <el-form label-width="120px">
      <el-form-item label="管理员账号">
        <el-input v-model="username"></el-input>
      </el-form-item>

    

      <el-form-item>
        <el-button type="primary" @click="add()">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapActions } = createNamespacedHelpers("admins");
export default {
  data() {
    return {
      username: "",

      imageUrl: "",
    };
  },
  methods: {
    ...mapActions(["addAdmins"]),
    success() {
      this.$message({
        message: "添加成功",
        type: "success",
      });
    },
    falisd() {
      this.$message({
        message: "用户名已存在",
        type: "error",
      });
    },
    handleAvatarSuccess(res, file) {
 
      this.addstu.stupic.push(res[0].filename);
      this.imageUrl = URL.createObjectURL(file.raw);
      // this.imageUrl='http://localhost:3000/ptem/'+ res[0].filename
    },
    beforeAvatarUpload(file) {
  
      //   const isJPG = file.type === "image/jpeg";
      //   const isLt2M = file.size / 1024 / 1024 < 2;
      //   if (!isJPG) {
      //     this.$message.error("上传头像图片只能是 JPG 格式!");
      //   }
      //   if (!isLt2M) {
      //     this.$message.error("上传头像图片大小不能超过 2MB!");
      //   }
      //   return isJPG && isLt2M;
    },
    async add() {
      const data = await this.addAdmins({ username: this.username });
      const { status } = data;
      if (status) {
        this.success();
      }else{
        this.falisd();
      }
    },
  },
};
</script>

<style lang="scss">
#addbox {
  width: 300px;
  margin: 0 auto;
  .el-input__inner {
    width: 200px;
  }
}
</style>